<template>
	<view class="content">
		<!-- <nav-header bgColor="bg-custom-color">
			<block slot="content">{{$t('wallet.title')}}</block>
		</nav-header> -->

		<scroll-view scroll-x class="bg-white nav text-center fixed">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<block v-if="TabCur==0">
			<view class="this-fixed">
				<view class="wallet ghmi">
					<view class="lc1">
						<view class="wallet-name"><text>GUSD</text></view>
					</view>
					<view class="lc2">
						<view class="div-par">
							<view class="div-son">
								<view>持有数量</view>
								<view>1000</view>
							</view>
							<view class="div-son">
								<view>持有数量</view>
								<view>1000</view>
							</view>
							<view class="div-son">
								<view>持有数量</view>
								<view>1000</view>
							</view>
						</view>
						<view class="div-par">
							<text class="div-son">持有数量</text>
							<text class="div-son">可用数量</text>
							<text class="div-son">锁定数量</text>
						</view>
						<view class="div-par" style="margin-top: 8px;">
							<text class="div-son">1000</text>
							<text class="div-son">300</text>
							<text class="div-son">700</text>
						</view>
						<view class="lc3">=$0</view>
						<view class="div-par btn-div" style="margin-top: 8px;">
							<view class="div-son btn">收益</view>
							<view class="div-son btn">提币</view>
							<view class="div-son btn">转账</view>
							<view class="div-son btn">记录</view>
						</view>
					</view>
				</view>
				<view class="wallet gusd">
					<view class="lc1">
						<view class="wallet-name"><text>GUSD</text></view>
					</view>
					<view class="lc2">
						<view class="div-par">
							<text class="div-son">持有数量</text>
							<text class="div-son">可用数量</text>
							<text class="div-son">锁定数量</text>
						</view>
						<view class="div-par" style="margin-top: 8px;">
							<text class="div-son">1000</text>
							<text class="div-son">300</text>
							<text class="div-son">700</text>
						</view>
						<view class="lc3">=$0</view>
						<view class="div-par btn-div" style="margin-top: 8px;">
							<view class="div-son btn">收益</view>
							<view class="div-son btn">提币</view>
							<view class="div-son btn">转账</view>
							<view class="div-son btn">记录</view>
						</view>
					</view>
				</view>

			</view>

		</block>

		<block v-if="TabCur==1">
			<view class="img-div">
				<image class="img-view this-img" src="../../static/img/wakuang.gif" mode="aspectFit"></image>
			</view>
			<view>
				<view class="div-title">我的收益</view>
				<view class="par padding-20">
					<view class="son">
						<view class="cj-title">已出金</view>
						<view class="cj-value">50.23</view>
					</view>
					<view class="son">
						<view class="cj-title">未出金</view>
						<view class="cj-value">1002</view>
					</view>
				</view>
			</view>
			<view>
				预约时间:<text>3:05:56</text>
			</view>
			<view>
				<view>我的订单</view>
				<view>
					<view class="par">
						<view class="son">用户名</view>
						<view class="son">算力</view>
						<view class="son">收益</view>
						<view class="son">状态</view>
						<view class="son">时间</view>
					</view>
					<view class="par">
						<view class="son">18256032048</view>
						<view class="son">1000</view>
						<view class="son">100</view>
						<view class="son">已出金</view>
						<view class="son">11-15</view>
					</view>

				</view>
			</view>
		</block>




		<!-- <view class="cu-list menu card-menu margin-top wallet">
			<view class="cu-item arrow" @click="$common.toPage('../wallet/wallet_usdt')">
				<view class="content et-content">
					<text class="text-grey et-text lc1-1 bg-color">USDT</text>
					<text class="text-grey et-text text-color">{{$t('balance')}}</text>
					<text class="text-grey et-text text-color">{{userInfo.biUsdt}}</text>
				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu margin-top wallet">
			<view class="cu-item arrow" @click="$common.toPage('../wallet/wallet_ghmi')">
				<view class="content et-content">
					<text class="text-grey et-text lc1-1 bg-color">GHMI</text>
				</view>
			</view>
			<view class="lc2-son bg-color1">
				<view class="lc2-son1 lc2-son-par">
					<text class="lc2-son1-text">{{$t('balance')}}</text>
					<text class="lc2-son1-text">{{$t('freezing')}}</text>
					<text class="lc2-son1-text">{{$t('conversion')}}(USDT)</text>
				</view>
				<view class="lc2-son2 lc2-son-par">
					<text class="lc2-son2-text text-color">{{ghmi||0}}</text>
					<text class="lc2-son2-text text-color">{{orderMoneySum||0}}</text>
					<text class="lc2-son2-text text-color">{{$common.numFilter(orderMoneySum * bili) }}</text>
				</view>

			</view>
		</view> -->


		<nav-bottom showIndex='2'></nav-bottom>
	</view>


</template>

<script>
	var t;
	export default {
		data() {
			return {
				userInfo: null,
				ghmi: '',
				orderMoneySum: '0.00',
				zheheUsdt: '0.00',
				bili: 1,
				CustomBar: this.CustomBar,
				TabCur: 0,
				tabNav: ['钱包', '我的订单'],
			}
		},
		onLoad() {
			t = this;
			this.$i18n.locale = t.$common.localRead("local")
			t.userInfo = $common.getUser()
			if (!t.userInfo) {
				$common.notLoginUser()
			}
			t.getHuilv()
			t.getData()
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getData() {
				let data = {
					addUserId: t.userInfo.id,
					orderState: 10
				}
				t.$fetch.request('orderInfo/userOrder', data).then((res) => {
					if (res.code == 200) {
						console.info("获取orderInfo/userOrder成功")
						t.orderMoneySum = res.data.orderMoney
						t.ghmi = res.data.ghmi
						// $common.setToken(res.data.token)
						// console.info($common.getToken())

						// t.getUserByToken()
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			getHuilv() {
				this.$fetch.request('api/queryExchange', {
					shortName: 'CNY'
				}).then((res) => {
					console.info(res.data)
					if (res.status == 'success') {
						t.bili = res.data.USDT
						console.info(t.bili)
					} else {
						$common.showToast(res.message);
					}
				}).catch((e) => {})
			},
		}
	}
</script>

<style>
	.cj-title{
		    font-size: 18px;
		    color: coral;
		    height: 40px;
		    line-height: 40px;
	}
	.cj-value{
		    font-size: 16px;
		    color: #172434;
		    height: 40px;
		    line-height: 40px;
	}
	.div-title{
		    padding: 15px;
		    font-size: 18px;
		    color: #A0A0A0;
	}
	.img-div {
		margin-top: 45px;
	}

	.this-img {
		padding: 50px;
		width: 100%;
	}

	.this-fixed {
		position: fixed;
		width: 100%;
		top: 45px;
	}

	.ghmi {
		background-color: #6FD4D0;
	}

	.ghmi .wallet-name {
		color: #6FD4D0;
	}

	.ghmi .lc2 {
		background-image: linear-gradient(-90deg, #57C8C2 0%, #61CCC6 100%);
	}

	.gusd {
		background-color: #5F678C;
	}

	.gusd .wallet-name {
		color: #5F678C;
	}

	.gusd .lc2 {
		background-image: linear-gradient(-90deg, #485075 0%, #4D5178 100%);
	}

	.wallet {
		border-radius: 10px;
		margin-bottom: 30px;
	}

	.lc1 {
		padding: 20px 20px 0px 20px;
	}

	.lc2 {
		padding: 20px;
		color: white;
		border-radius: 0 0 10px 10px;
	}

	.div-par {
		display: flex;
	}

	.div-son {
		flex: 1;
		font-size: 16px;
	}

	.lc3 {
		font-size: 16px;
		margin-top: 15px;
	}

	.wallet-name {
		height: 50px;
		line-height: 50px;
		font-size: 26px;
		background-color: white;
		padding: 0 20px;
		color: #6fd4d0;
		border-radius: 15px 15px 0 0;
	}

	.btn-div {
		height: 30px;
		line-height: 30px;
	}

	.btn {
		border-radius: 15px;
		border: 0.5px solid white;
		text-align: center;
		margin: 0 5px;
	}
</style>
